<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>角色列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/layui/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/public.css" media="all" />
</head>
<body class="childrenBody">
<form class="layui-form">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="rolenameSearch" placeholder="请输入角色名" />
                </div>
                <a class="layui-btn search_btn" data-type="reload">搜索</a>
            </div>
            <div class="layui-inline">
                <a class="layui-btn layui-btn-normal addUser_btn">添加角色</a>
            </div>
            <div class="layui-inline">
                <a class="layui-btn layui-btn-danger layui-btn-normal delAll_btn">批量删除</a>
            </div>
        </form>
    </blockquote>
    <table id="roleList" lay-filter="roleList"></table>
    <!--操作-->
    <script type="text/html" id="roleListBar">
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="assignRight">分配权限</a>
    </script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/layui/layui/layui.js"></script>
    <script>
        layui.use(['form','layer','laydate','table','laytpl'],function(){
            var form = layui.form,
                layer = parent.layer === undefined ? layui.layer : top.layer,
                $ = layui.jquery,
                laydate = layui.laydate,
                laytpl = layui.laytpl,
                table = layui.table;
            //用户列表
            var tableIns = table.render({
                elem: '#roleList',
                url : '/roles',
                cellMinWidth : 95,
                page : true,
                height : "full-125",
                limit : 5,
                limits : [5,15,20,25],
                id : "roleListTable",
                cols : [[
                    {type: "checkbox", fixed:"left", minWidth:50},
                    {field: 'id', title: '编号', minWidth:125, align:"center"},
                    {field: 'rolename', title: '角色名', minWidth:100, align:"center"},
                    {title: '操作', minWidth:300, templet:'#roleListBar',fixed:"right",align:"center"}
                ]]
            });
            //搜索信息
            $(".search_btn").click(function () {
                //获取电话号码
                var rolename=$("#rolenameSearch").val();
                //重载表格
                tableIns.reload({
                    where:{
                        rolename:rolename
                    }
                });
            });
            //选择表格中的操作按钮
            table.on("tool(roleList)",function (obj) {
               switch (obj.event){
                   case 'assignRight':
                       assignRight(obj.data.id);
                       break;
               }
            });
            //打开分配权限的页面
            function assignRight(roleId) {
                var userLayer=layui.layer.open({
                    type:2,
                    title:'分配权限',
                    content:'/prepAssignRight',
                    area: ['300px', '500px'],
                    success: function(layero, index){
                        var body = layui.layer.getChildFrame('body', index);//少了这个是不能从父页面向子页面传值的
                        body.contents().find("#roleIdHiden").val(roleId);

                    }
                });
            }
        })
    </script>
</body>
</html>